<template>
    <div class="f-header ">

        <span class="logo">

            海兰信船舶服务管理系统
        </span>
        <el-icon class="icon-btn" @click="$store.commit('handleAsideWidth')">
            <Fold v-if="$store.state.asideWidth == '250px'" />
            <Expand v-else />
        </el-icon>
        <el-tooltip effect="dark" content="刷新" placement="bottom-start">
            <el-icon @click="handleRefresh" class="icon-btn">
                <Refresh />
            </el-icon>
        </el-tooltip>


        <div class="ml-auto flex items-center">

            <el-tooltip effect="dark" content="全屏" placement="bottom-start">
                <el-icon @click="toggle" class="icon-btn">
                    <FullScreen v-if="!isFullscreen" />
                    <Aim v-if="isFullscreen" />
                </el-icon>
            </el-tooltip>

            <el-badge v-if="unReadMsgCount == 0" :max="99" class="item">
                <el-icon @click="showMessage"><Message /></el-icon>
            </el-badge>
            <el-badge v-else :value="unReadMsgCount" :max="99" class="item">
                <el-icon @click="showMessage"><Message /></el-icon>
            </el-badge>

            <el-dropdown class="dropdown" @command="handleCommand">
                <span class="flex items-center text-light-50">
                    <!-- <el-avatar class="mr-2" :size="25" :src="$store.state.user.avatar" /> -->
                    {{ $store.state.user.username }}
                    <el-icon class="el-icon--right">
                        <arrow-down />
                    </el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item command="rePassword">修改密码</el-dropdown-item>
                        <el-dropdown-item command="logout">退出登录</el-dropdown-item>

                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>

    <FormDrawer ref="formDrawerRef" title="修改密码" destryOnClose @submit="onSubmit" >
        <el-form ref="formRef" :rules :model="form" label-width="80px">
            
            <el-form-item prop="password" label="密码">
                <el-input v-model="form.password" placeholder="密码" autocomplete="new-password" show-password type="password">

                </el-input>
            </el-form-item>
            <el-form-item prop="newPassword" label="新密码">
                <el-input v-model="form.newPassword" placeholder="新密码" autocomplete="new-password" show-password type="password">

                </el-input>
            </el-form-item>

        </el-form>
    </FormDrawer>

    <!-- 打开消息弹窗 -->
    <el-dialog v-model="dialogTableVisible_message" title="站内信" width="70%" align-center>
    <!-- 站内信消息 -->
    <ShowMessage v-if="dialogTableVisible_message" @readCountChange="readCountChange"></ShowMessage>
    <template #footer>
        <div class="dialog-footer">
            <el-button type="primary" @click="dialogTableVisible_message = false">
                关闭
            </el-button>
        </div>
    </template>
    </el-dialog>
</template>

<script setup>
import { useFullscreen } from '@vueuse/core'
import { ref,onMounted,onUnmounted } from "vue"
import FormDrawer from '~/components/FormDrawer.vue'
import { useRepassword, useLogout } from '~/composables/useManager'
import { getUnReadMsgCount } from "~/api/messageApi"
import ShowMessage from "~/components/user-message.vue";


//未读消息数量
const unReadMsgCount = ref(0)
//定时器
var timer = ref(null)
//站内信弹窗
const dialogTableVisible_message = ref(false)

const {
    isFullscreen // 是否全屏
    , toggle  // 切换全屏
} = useFullscreen()

const {formDrawerRef,formRef,form,rules,onSubmit,openRePassword} = useRepassword()

const {handleLogout,} = useLogout()

const handleCommand = (c) => {
    switch (c) {
        case "logout":
            handleLogout()
            break;
        case "rePassword":
            openRePassword()
            break;
        default:
            break;
    }
}

// 刷新
const handleRefresh = () => {
    location.reload()
}

// 生命周期函数
onMounted(() => {
    // 首次打开加载一次
    initUnReadMsgCount()
    // 在组件挂载时启动定时器
    timer = setInterval(initUnReadMsgCount, 60000);
})

onUnmounted(() => {
    // 在组件卸载时清除定时器，防止内存泄漏
    clearInterval(timer);
});

// 初始化未读站内信数量
const initUnReadMsgCount = () => {
    getUnReadMsgCount()
    .then(res => {
        if(res){
            // console.log(res)
            unReadMsgCount.value = res
        }
    })
}

// 展示站内信
const showMessage = () => {
    dialogTableVisible_message.value = true
}

// 已读信息-1
const readCountChange = (count) => {
    if(count == 1){
        unReadMsgCount.value = unReadMsgCount.value - 1
    }else{
        unReadMsgCount.value = 0
    }
}


</script>

<style>
.f-header {
    @apply flex items-center bg-indigo-500 text-light-50 fixed top-0 left-0 right-0;
    height: 64px;
    z-index: 100;
}

.logo {
    width: 250px;
    @apply flex justify-center items-center text-xl;
}

.icon-btn {
    @apply flex justify-center items-center;
    width: 42px;
    height: 64px;
    cursor: pointer;
}

.icon-btn:hover {
    @apply bg-indigo-400;
}

.f-header .dropdown {
    height: 64px;
    cursor: pointer;
    @apply flex justify-center items-center mx-5;
}

.item {
    height: 20px;
    margin-left: 10px;
    margin-right: 10px;
    cursor: pointer;
}
</style>